<template>
  <v-layout class="release-container" justify-start align-start wrap>

    <v-flex md6 pt-4>
      <v-layout justify-start align-center wrap px-5>
        <v-flex md12 d-flex align-center justify-start>
          <v-radio-group v-model="pay.payMethod">
            <v-radio
              v-for="(item, i) in payMethods"
              :key="i"
              :label="item.text"
              :value="item.value"
              color="primary"
              @change="onMethodChange"
            ></v-radio>
          </v-radio-group>
        </v-flex>

        <v-flex md8 mt-2 d-flex align-center justify-space-between class="image-wrapper">
          <img v-if="pay.payMethod == '1'" :src="imageMap.payment_zfb" alt class="qrcode-image" />
          <img v-else :src="imageMap.payment_wx" alt class="qrcode-image" />

          <div class="upload-bg">
            <ui-icon v-if='!imageMap.payment_zfb || !imageMap.payment_zfb' icon="cloud-upload fa-lg" class="cloud-icon"></ui-icon>
          </div>
        </v-flex>

        <v-flex md12 mt-4 d-flex align-center justify-center>
          <v-flex md4>
            <v-btn large round color="primary" @click="onUpload">
              <span class="title">上传</span>
            </v-btn>
          </v-flex>
        </v-flex>
      </v-layout>
    </v-flex>

    <v-dialog v-model="dialog" width="900">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>上传图片</v-card-title>

        <v-card-text>
          <v-layout row wrap justify-center>
            <v-flex md8 class="droppable" id="dropPanel" @drop="onDrop" @dragover="onDragOver">
              <div class="fill-height fill-width">
                <img class="preview-image" :src="imagePreview" alt v-if="imagePreview !== ''" />
              </div>

              <ui-icon icon="cloud-upload fa-lg" v-if="imagePreview === ''" class="cloud-icon"></ui-icon>
              <span v-if="imagePreview === ''" class="upload-tip title-color">选择图片</span>

              <input
                type="file"
                accept="image/*"
                name="imageInput"
                class="file-input"
                @change="onFileInputChange"
              />
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="onDialogConfirm">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { KV } from "@/utils/type";
import { Todo, User, FileHandler, System } from "@/api";
import { CheckCommon, RespFileVo, SysConfig } from "@/api/bean";
import { BuyerStatusKV, TopupStatusKV } from "@/utils/constants";
declare const $Vue: Vue;

@Component({})
export default class TopupAudit extends Vue {
  private payMethods: Array<KV> = [
    {
      text: "支付宝",
      value: "1"
    },
    {
      text: "微信",
      value: "2"
    }
  ];

  private qrcodeImage: string = '';

  private buyerStatus: Array<KV> = TopupStatusKV;

  private pay: any = {
    payMethod: '1'
  };
  private imagePreview: string = '';

  private file: any = null;
  private dialog: boolean = false;
  private dialogTitle: string = "";
  private dialogType: number = 1;
  private dialogItem: any = {};
  private dialogData: any = {};

  private imageMap = {
    payment_zfb: '',
    payment_wx: '',
  }

  protected mounted() {
    // this.pay = this.$route.params;
    this.getSysSettinglist();
  }

  private onUpload() {
    this.dialog = true;
  }

  private onDialogConfirm() {
    this.uploadFile();
  }

  private onDrop(ev: any) {
    ev.preventDefault();
    const file = ev.dataTransfer.files[0];
    if (!file.name.match(/\.jp(e)g|png/g)) {
      return alert("请拖入图片文件");
    }
    this.handleImageFile(file);
  }

  private onDragOver(ev: DragEvent) {
    ev.preventDefault();
    return false;
  }

  private onFileInputChange(ev: any) {
    let file = ev.target.files[0];
    this.handleImageFile(file);
  }

  private handleImageFile(file: File) {
    const reader = new FileReader();
    this.file = file;
    reader.onload = (ev: any) => {
      this.imagePreview = ev.target.result;
    };
    reader.readAsDataURL(file);
  }

  /**
   * 图片上传完成
   */
  private handleImageUploaded(data: RespFileVo) {
    let fileUrl = data.fileUrl;
    if (this.pay.payMethod == '1') {
      this.saveSystemSetting('payment_zfb', fileUrl)
    }
    if (this.pay.payMethod == '2') {
      this.saveSystemSetting('payment_wx', fileUrl)
    }
  }

  private onMethodChange(value: any) {
    console.log(value);
  }

  private async getSysSettinglist() {
    const params: any = {
    };
    const { data } = await System.getSysSettinglist.r(params);
    console.log("getSysSettinglist", data);
    if (data.result === 0) {
      // this.handleSysConfig(data.data);
      data.data.forEach((item: SysConfig) => {
        if (item.confName === 'payment_zfb') {
          this.imageMap.payment_zfb = item.confValue;
        }
        if (item.confName === 'payment_wx') {
          this.imageMap.payment_wx = item.confValue;
        }
      });
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  private async saveSystemSetting(confName: string, confValue: any) {
    const params: any = {
      confName,
      confValue
    };
    const { data } = await System.saveSystemSetting.r(params);
    console.log("saveSystemSetting", data);
    if (data.result === 0) {
      this.file = null;
      this.imagePreview = '';
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  private async uploadFile() {
    const params: FormData = new FormData();
    params.append('file', this.file);
    const config = {
      headers: {
        "Content-Type": "multipart/form-data"
      },
    };
    const { data } = await FileHandler.uploadFile.r(params, config);
    console.log("uploadFile", data);
    if (data.result === 0) {
      // 图片上传完成后的处理
      this.handleImageUploaded(data.data[0]);
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }
}
</script>

<style lang="less" scoped>
.qrcode-image {
  height: 10rem;
}

.image-wrapper {
  position: relative;
  height: 20rem;
  .qrcode-image {
    height: 100%;
  }
}
.upload-bg {
  position: absolute;
  height: 20rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed #a2a2a2;
  border-radius: 8px;
}
.preview-image {
  max-width: 100%;
  max-height: 100%;
}
</style>